<template>
  <v-header :styleHearde="bol"></v-header>
  <Loading text="拼命加载中..." v-if="isLoading"></Loading>
  <router-view />
  <v-footer></v-footer>
</template>

<script lang="ts">
import "bootstrap/dist/css/bootstrap.min.css";
import { defineComponent, computed } from "vue";
import { useRoute } from "vue-router";
import VHeader from "./components/layout/header.vue";
import VFooter from "./components/layout/footer.vue";
import Loading from "./components/Loading.vue";
import { useStore ,mapMutations} from "vuex";
export default defineComponent({
  components: {
    VHeader,
    VFooter,Loading
  },
  setup() {
    
    const route = useRoute();
    const store = useStore();
    const path = computed(() => route.path);
    const bol = computed(() => {
      return path.value == "/" || path.value == "home";
    });
  
    const isLoading = computed(() => store.state.loading.loading)
  
    return {
      path, bol, isLoading
    };
  },
});
</script>

<style lang="scss">
* {
  font-family: "微软雅黑", "Verdana", "宋体", "Lucida Grande",
    "Lucida Sans Unicode", Tahoma, sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
img {
  cursor: pointer;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
.translateY {
  transition: all ease-in-out 0.3s;
  &:hover {
    cursor: pointer;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    box-shadow: 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
      0 6px 12px 0 rgba(0, 0, 0, 0.03);
    z-index: 1;
  }
}
.pointer {
  cursor: pointer;
}
</style>
